// require : jquery layui[layer,element(tab)] input#jsf-icon
// todo : 改造为多个 .jsf-icon
// ;$(function(){

    // icon select 事件
    var timer,indexIcon,$thisIcon;
;layui.use(["layer","jquery","element"],function(layer,$,element){
  // var cardIcons = "#body #icon-select";
  // if( $("body>#icon-select").length ){
  //   $(cardIcons).remove();
  // }else{
  if(!window.$iconSelect){
  window.$iconSelect = $(`<div><div class="icon-select" id="icon-select">
  <div class="icon-search layui-form">
    <div class="layui-form-item">
      <label for="icon-class" class="layui-form-label">`+ L('search icon') + `</label>
      <div class="layui-input-inline">
        <input type="text" name="icon-class" id="js-icon-search" value="" class="layui-input" placeholder="` + L('eg') + `: 输入 home"  autocomplete="off" required  lay-verify="required" >
      </div>
    </div>
  </div>
  <div class="layui-tab layui-tab-brief">
    <ul class="layui-tab-title">
      <li class="layui-this">LAYUI(<span id="js-layui-icons">0</span>)</li>
      <li>FONT-AWESOME(<span id="js-fa-icons">0</span>)</li>
    </ul>
    <div class="layui-tab-content">
      <div class="layui-tab-item layui-show">
        <!-- layui2.4.5(140) -->
        <ul class="layui-clear">
          <input type="hide" name="layui-icons" value="rate-half,rate,rate-solid,cellphone,vercode,login-wechat,login-qq,login-weibo,password,username,refresh-3,auz,spread-left,shrink-right,snowflake,tips,note,home,senior,refresh,refresh-1,flag,theme,notice,website,console,face-surprised,set,template-1,app,template,praise,tread,male,female,camera,camera-fill,more,more-vertical,rmb,dollar,diamond,fire,return,location,read,survey,face-smile,face-cry,cart-simple,cart,next,prev,upload-drag,upload,download-circle,component,file-b,user,find-fill,*loading,*loading-1,add-1,play,pause,headset,video,voice,speaker,fonts-del,fonts-code,fonts-html,fonts-strong,unlink,picture,link,face-smile-b,align-left,align-right,align-center,fonts-u,fonts-i,tabs,radio,circle,edit,share,delete,form,cellphone-fine,dialogue,fonts-clear,layer,date,water,code-circle,carousel,prev-circle,layouts,util,templeate-1,upload-circle,tree,table,chart,chart-screen,engine,triangle-d,triangle-r,file,set-sm,add-circle,404,about,up,down,left,right,circle-dot,search,set-fill,group,friends,reply-fill,menu-fill,log,picture-fine,face-smile-fine,list,release,ok,help,chat,top,star,star-fill,close-fill,close,ok-circle,add-circle-fine">
          <!-- <li title="{$v}"><i class="layui-icon layui-icon-{$v} {$temp}"></i></li> -->
        </ul>
      </div>
      <div class="layui-tab-item">
        <ul>
          <input type="hide" name="fa-icons" value="hand-grab-o,hand-lizard-o,hand-o-down,hand-o-left,hand-o-right,hand-o-up,hand-paper-o,hand-peace-o,hand-pointer-o,hand-rock-o,hand-scissors-o,hand-spock-o,hand-stop-o,thumbs-down,thumbs-o-down,thumbs-o-up,thumbs-up,align-center,align-justify,align-left,align-right,bold,chain,chain-broken,clipboard,columns,copy,cut,dedent,eraser,file,file-o,file-text,file-text-o,files-o,floppy-o,font,header,indent,italic,link,list,list-alt,list-ol,list-ul,outdent,paperclip,paragraph,paste,repeat,rotate-left,rotate-right,save,scissors,strikethrough,subscript,superscript,table,text-height,text-width,th,th-large,th-list,underline,undo,unlink,angle-double-down,angle-double-left,angle-double-right,angle-double-up,angle-down,angle-left,angle-right,angle-up,arrow-circle-down,arrow-circle-left,arrow-circle-o-down,arrow-circle-o-left,arrow-circle-o-right,arrow-circle-o-up,arrow-circle-right,arrow-circle-up,arrow-down,arrow-left,arrow-right,arrow-up,arrows,arrows-alt,arrows-h,arrows-v,caret-down,caret-left,caret-right,caret-square-o-down,caret-square-o-left,caret-square-o-right,caret-square-o-up,caret-up,chevron-circle-down,chevron-circle-left,chevron-circle-right,chevron-circle-up,chevron-down,chevron-left,chevron-right,chevron-up,exchange,hand-o-down,hand-o-left,hand-o-right,hand-o-up,long-arrow-down,long-arrow-left,long-arrow-right,long-arrow-up,toggle-down,toggle-left,toggle-right,toggle-up">
          <!-- hand 17 -->
          <!-- text editor(49) -->
          <!-- direct(53) -->
            <!-- <li title="{$v}"><i class="fa fa-{$v}"></i></li> -->
        </ul>
      </div>
    </div>
  </div>
</div></div>`);
    setIconHtml("input[name='layui-icons']","#js-layui-icons","layui-icon layui-icon-");
    setIconHtml("input[name='fa-icons']","#js-fa-icons","fa fa-");
    // var $iconSelect = $(cardIcons);
    // $(cardIcons).remove();
    // $("body").append($iconSelect);
  }
  function setIconHtml(icons,iconCount,commonClass) {
    // var $icons   = $(icons);
    var $icons   = window.$iconSelect.find(icons);
    var iconsArr = ($icons.val() || '').split(',') || [];
    if(iconsArr.length){
      // $(iconCount).html(iconsArr.length);
      window.$iconSelect.find(iconCount).html(iconsArr.length);
      var iconHtml = '';
       // TODO 生成icon预览
      $.each(iconsArr,function(i, e) {
        iconHtml += '<li title="' + e + '"><i class="'+commonClass;
        if(e.startsWith("*")){
          iconHtml += e.substring(1)+' layui-anim layui-anim-rotate layui-anim-loop"></i></li>';
        }else{
          iconHtml += e+' "></i></li>';
        }
      });
      iconHtml && $icons.parent("ul").html(iconHtml);
    }
  }
  // modal 打开事件
  $('.js-jsf-icon').click(function(e) {
    $thisIcon = $(this);
    // console.log($this);
    indexIcon = layer.open({
      title: L('<h3> select icon </h3>'),
      type:1,
      // closeBtn:0,
      area:"600px",
      shadeClose:true,
      content: window.$iconSelect.html(),
      // content: $("#icon-select"),
      success: function(layero, index){
        console.log(layero, index);
        //
        $("#icon-select .layui-tab-item li").click(function(e) {
          var css = $(this).find('i').attr('class');
          $thisIcon.val(css).parent().next('div').find('i').attr('class',css);
          layer.close(indexIcon);
        });
        // modal 及时搜索
        var lastKword = "";
        $('#icon-select #js-icon-search').keyup(function(e) {
          clearInterval(timer);
          var $this = $(this);
          timer = setInterval(function(){
            var kword = $this.val();
            //console.log('kword',kword);
            if(kword){
              if(kword!=lastKword) {
                $('#icon-select .layui-tab-content i').map(function(i, e) {
                  $e = $(e);
                  if($e.attr('class').indexOf(kword) == -1){
                    $e.parent().addClass('hide');
                  }else{
                    $e.parent().removeClass('hide');
                  }
                  lastKword = kword;
                  // continue;
                  // return something;
                })
              }
            }else{
              lastKword = "";
              $('#icon-select .layui-tab-content li').removeClass('hide');
            }
          },200);
        });
      }
    });
  });
});